import {Layout} from '../../src/Layout';
import {InstallCommand} from '../../src/InstallCommand';
import {Command} from '../../src/Command';
import {IconsPageSearch} from '../../src/IconSearchView';
import {IconColors} from '../../src/IconColors';
import {IconSizes} from '../../src/IconSizes';
import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
export default Layout;

import docs from 'docs:@react-spectrum/s2';

export const tags = ['svg', 'workflow', 'symbol'];
export const description = 'A collection of workflow icons that can be imported from @react-spectrum/s2/icons.';

# Icons

<PageDescription>React Spectrum offers a set of open source icons that can be imported from `@react-spectrum/s2/icons`.</PageDescription>

```tsx render expanded
"use client";
import Edit from "@react-spectrum/s2/icons/Edit";

<Edit />
```

## Available icons

<IconsPageSearch />

## API

Icons support a more limited set of the style macro through a special macro called `iconStyle`.

### iconStyle

```tsx render expanded
"use client";
import {iconStyle} from '@react-spectrum/s2/style' with {type: 'macro'};
import Edit from '@react-spectrum/s2/icons/Edit';

<Edit styles={iconStyle({size: 'XL', color: 'positive'})} />
```

### Icon colors

<IconColors colors={[
  'white',
  'black',
  'accent',
  'neutral',
  'negative',
  'informative',
  'positive',
  'notice',
  'gray',
  'red',
  'orange',
  'yellow',
  'chartreuse',
  'celery',
  'seafoam',
  'cyan',
  'blue',
  'indigo',
  'purple',
  'fuchsia',
  'magenta',
  'pink',
  'turquoise',
  'cinnamon',
  'brown',
  'silver'
]} />

### Icon sizes

<IconSizes sizes={[
  {size: 'XS', pixels: '14px'},
  {size: 'S', pixels: '16px'},
  {size: 'M', pixels: '20px'},
  {size: 'L', pixels: '22px'},
  {size: 'XL', pixels: '26px'}
]} />

## Custom icons

To use custom icons, you first need to convert your SVGs into compatible icon components. This depends on your bundler.

<InlineAlert variant="notice">
  <Heading>Requirements</Heading>
  <Content>To use an SVG as an icon which sizes correctly and uses the correct colors, it must be a square (20x20), with a viewBox of `0 0 20 20`. It must also have a fill with `var(--iconPrimary, #222)`.</Content>
</InlineAlert>

### Parcel

If you are using Parcel, the `@react-spectrum/parcel-transformer-s2-icon` plugin can be used to convert SVGs to icon components. First install it into your project as a dev dependency:

<InstallCommand pkg="@react-spectrum/parcel-transformer-s2-icon" flags="--dev" />

Then, add it to your `.parcelrc`:

```tsx
{
  extends: "@parcel/config-default",
  transformers: {
    "icon:*.svg": ["@react-spectrum/parcel-transformer-s2-icon"]
  }
}
```

Now you can import icon SVGs using the `icon:` [pipeline](https://parceljs.org/features/plugins/#named-pipelines):

`import Icon from 'icon:./path/to/Icon.svg';`

### Other bundlers

The `@react-spectrum/s2-icon-builder` CLI tool can be used to pre-process a folder of SVG icons into TSX files.

<Command command="npx @react-spectrum/s2-icon-builder -i 'path/to/icons/*.svg' -o 'path/to/destination'" />

This outputs a folder of TSX files with names corresponding to the input SVG files. You may rename them as you wish. To use them in your application, import them like normal components.
`import Icon from './path/to/destination/Icon';`

### Building icons as a library

You can also build the icons as a separate library for distribution so that multiple projects can share the same icons. Or possibly you simply do not want to output tsx files.
To do this, use the `--isLibrary` flag.

<Command command="npx @react-spectrum/s2-icon-builder -i 'path/to/icons/*.svg' -o 'path/to/destination' --isLibrary" />

This outputs a folder of ES modules and commonjs modules with names corresponding to the input SVG files. You may rename them as you wish. To use them in your application, import them like normal components.
`import Icon from 'library-name/path/to/destination/Icon';`
